<template>
  <div>
  <div class="artitem">
    <div class="header">
        <img src="@/assets/tubiao.png">
        <span class="name">{{ item.commentNickname }}</span> 
        <van-icon name="ellipsis" size="30" @click="Show"/>
        <van-action-sheet
           v-model="show"
           :actions="actions"
           cancel-text="取消"
           close-on-click-action
           @cancel="onCancel"
           @select="onSelect"
         />
    </div>
    <div class="middle">
        <span>{{ item.commentContent }}</span>
        <p>{{ item.commentTime }}</p>
    </div>
  </div>
</div>
</template>

<script>
import {deleteCommend,findPostId} from '@/api/user'
export default {
    data() {
    return {
        show: false,
      actions:[{ name: '删除评论' },{name:'查看详情'}],
      postUid:''

    };
},
props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  async created(){
    // console.log('item数据',this.item);
    try {
    const res = await findPostId(this.item.postId
);
// console.log(res);
    this.postUid = res.data;
    // console.log( this.postUid);
  } catch (error) {
    console.log(error);
  }
  },
methods:{
    Show(){
        this.show=true
    },
    onCancel() {
     this.$toast('取消')
    },
    onSelect(item) {
        if(item.name=='删除评论'){
            this.DeleteCommend()
            // this.$toast('删除成功');
        }else if(item.name=='查看详情'){
            this.lookDetail();
        }
    },


     //删除评论定义方法
     DeleteCommend(){
        // console.log('要删的评论id',this.item.commentId);
        deleteCommend(this.item.commentId)
        .then((res)=>{
          this.$toast('删除成功');
          // 接口调用完成后强制刷新页面
            location.reload();
            // console.log('删除返回响应值',res);
        })
    },
    lookDetail() {
      const param1 = this.item.postId; 
      const param2 = this.postUid; 
      // console.log("传递来的参数",param1,param2);
      this.$router.push({
        name: 'pinglun',
        params: {
          param1: param1,
          param2: param2
        }
      });
    }

}
}
</script>

<style lang="less" scoped>

.artitem{
  display: inline-block;
  border-radius: 10px;
  background-color: #f7f7f7;
  width: 90%;
  margin-left: 15px;
  margin-top: 10px;
 }
 .header{
    width: 100%;
    img{
        width: 40px;
        height: 40px;
        border-radius: 40px;
        margin-left: 10px;
        margin-bottom: -10px;
    }
    .name{
        font-size: 17px;
        position: relative;
        left: 5%;
    }
  
 }
 .middle{
    width: 100%;
    
    span{
        display: inline-block;
        width: 150px;
        margin-left: 35px;
        font-size: 15px;
        position: relative;
        top: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    p{
        margin-left: 255px;
        font-size: 14px;
    }
 }
 .van-icon-ellipsis{
    position: relative;
    left: 45%;
 }
</style>